<template>
<div>
  <div v-if="!isAssignPowerFlag">
    <!--  查询和清空按钮-->
    <el-row>
      <el-col :span="5"><el-input placeholder="角色名称" v-model="roleName"></el-input></el-col>
      <el-col :span="2"><el-button
        icon="el-icon-search"
        type="primary"
        style="margin-left: 10px"
        @click="searchRole"
      >查询</el-button></el-col>
      <el-col :span="2"><el-button style="margin-left: 5px" @click="roleName =null;getRoleList()">清空</el-button></el-col>
    </el-row>
    <!--  添加和批量删除-->
    <el-row style="margin: 20px 0">
      <el-col :span="1"><el-button type="primary" @click="addAndEditRoleDia=true">添加</el-button></el-col>
      <el-col :span="2" style="padding-left: 25px"><el-button type="danger":disabled="selectDel.length === 0" @click="deleteSelectRole">批量删除</el-button></el-col>
    </el-row>
    <!--  角色列表展示表格-->
    <el-table
      v-loading="roleLoadingVisible"
      border
      tooltip-effect="dark"
      style="width: 100%"
      :data="roleList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        type="index"
        label="序号"
        width="70"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="角色名称"
        prop="roleName"
      >
      </el-table-column>
      <el-table-column label="操作" width="370">
        <template slot-scope="scope">
          <!--      分配权限-->
          <el-button icon="el-icon-info" type="info" size="mini" @click="setRolePower(scope.row)">分配权限</el-button>
          <!--      修改角色信息-->
          <el-button icon="el-icon-edit" type="primary" size="mini" @click="openDia(scope.row)">编辑</el-button>
          <!--      删除角色-->
          <el-popconfirm
            title="确定要删除此角色吗"
            @onConfirm="deleteRole(scope.row)"
          >
            <el-button icon="el-icon-delete" slot="reference" type="danger" size="mini" style="margin-left: 10px">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--  分页器-->
    <el-pagination
      style="margin-top: 15px;text-align: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout=" prev, pager, next, jumper,->,total, sizes"
      :total="total">
    </el-pagination>
    <el-dialog
      :title="roleInfo.id ? '修改角色' : '添加角色'"
      :visible.sync="addAndEditRoleDia"
      width="50%"
      :before-close="closeAddAndEditHandle">
      <el-form :model="roleInfo" label-width="80px" :rules="roleNameRule" ref="addOrEditRoleRef">
        <el-form-item label="角色名" prop="roleName">
          <el-input v-model.trim="roleInfo.roleName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="closeAddAndEditHandle">取 消</el-button>
    <el-button type="primary" @click="addOrEditRole">确 定</el-button>
  </span>
    </el-dialog>
  </div>
  <assign-power v-if="isAssignPowerFlag" :flag.sync="isAssignPowerFlag" :roleInfo.sync="roleInfo"></assign-power>
</div>
</template>

<script>
import cloneDeep from 'lodash/fp/cloneDeep'
import AssignPower from './AssignPower'

export default {
  name: "Role",
  components:{
    AssignPower
  },
  data(){
    return {
      roleName:null, // 检索时用户使用的关键字

      currentPage: 1,
      pageSize: 5,
      total: 0,

      roleLoadingVisible: false, // 控制表格加载效果
      addAndEditRoleDia: false, // 控制添加或者修改角色名的dialog显示或者隐藏
      isAssignPowerFlag: false, // 控制是否打开分配权限的卡片

      roleList:[],  // 角色列表
      roleInfo:{},  // 添加或者修改的角色信息
      selectDel:[], // 选择删除的角色列表

      roleNameRule:{
        roleName:[{required: true,message:'角色名不可以为空',trigger: 'blur'}]
      } // 添加或者修改角色信息的表单验证规则
    }
  },
  methods:{
    // 异步获取角色列表信息
    async getRoleList() {
      this.roleLoadingVisible = true
      let res = await this.$API.role.apiGetRoleList({page: this.currentPage,limit:this.pageSize,roleName: this.roleName})
      if(res.code === 20000) {
        this.total = res.data.total
        this.roleList = res.data.items
      }else {
        this.$message.error('获取角色列表失败')
      }
      this.roleLoadingVisible = false
    },
    // 页面尺寸改变的回调
    handleSizeChange(pageSize){
      this.pageSize = pageSize
      this.getRoleList()
    },
    // 当前页面改变的回调
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getRoleList()
    },
    // 多选框中的数据发生改变
    handleSelectionChange(currentArr) {
      this.selectDel = currentArr.map(item=>{
        return item.id
      })
    },

    // 通过角色名搜索角色
    searchRole() {
      if(this.roleName === '') {
        this.$message.warning('关键词不可以为空')
        return
      }
      this.getRoleList()
    },
    // 添加或者修改角色
    addOrEditRole(){
      this.$refs['addOrEditRoleRef'].validate(async valid=>{
        if(!valid){
          this.$message.warning('请填写角色名')
        }else {
          let res = await this.$API.role.apiAddOrEditRoleInfo(this.roleInfo)
          if(res===undefined) {
            this.$message.warning('对不起您的权限不够')
          }else{
            this.$message.success(`${this.roleInfo.id ?'修改' : '添加'}成功`)
            this.getRoleList()
          }
        this.roleInfo = {}
        this.addAndEditRoleDia= false
        }
      })
    },
    // 删除角色
    async deleteRole(row) {
      let res = await this.$API.role.apiDeleteRole(row.id)
      if(res === undefined) {
        this.$message.warning('对不起，您的权限不够')
      }else{
        this.$message.success('删除成功')
        this.getRoleList()
      }
    },
    // 批量删除角色
    deleteSelectRole(){
      this.$confirm(`确认删除选中的${this.selectDel.length}项`, '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      }).then(async () => {
        let res = await this.$API.role.apiBatchDelRole(this.selectDel)
        if(res !== undefined) {
          this.$message.success('删除成功')
          this.getRoleList()
        }else {
          this.$message.warning('对不起您的权限不够')
        }
        this.selectDel = []
      }).catch(()=>{
        this.$message.info('已取消删除')
      })
    },
    // 分配角色权限
    setRolePower(row){
      this.roleInfo = cloneDeep(row)
      this.isAssignPowerFlag = true
    },

    // 打开添加和修改角色的dialog框
    openDia(row){
      this.addAndEditRoleDia = true
      this.roleInfo = cloneDeep(row)
    },
    // 关闭添加和修改角色dialog框
    closeAddAndEditHandle() {
      this.addAndEditRoleDia = false
      this.roleInfo = {}
    }
  },
  mounted() {
    // 获取角色基本列表
    this.getRoleList()
  }
}
</script>

<style scoped>

</style>
